<template>
  <div>
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="是否启用活动" prop="name" label-width="300px;">
        <el-switch v-model="ruleForm.name"></el-switch>
        <span>&nbsp;&nbsp;&nbsp;重启影响&nbsp;&nbsp;&nbsp;</span
        ><span
          ><i
            class="el-icon-info"
            style="font-size:18px"
            @:mouseenter="messge = true"
            @:mouseout="messge = false"
          ></i
        ></span>
        <span
          v-if="messge"
          style="line-height: 15px;width: 64%; margin-left: 20px"
          >活动停用后，用户签到连续天数清零，再次开启时，重新计算连续天数匹配奖励。</span
        >
      </el-form-item>
      <el-form-item label="签到预览" prop="desc">
        <div
          style="cursor:pointer"
          @:mouseenter="picture = true"
          @:mouseout="picture = false"
        >
          <span>预览</span>
          <div v-if="picture" style="position: absolute; z-index:100">
            <img src="https://oss.ztwlxx.cn/sigin.png" alt="" width="150px;" />
          </div>
        </div>
      </el-form-item>
      <el-form-item label="设置活动规则" prop="name" label-width="300px;">
        <div style="display: flex;">
          <div>
            <el-button
              type="primary"
              plain
              :disabled="ruleForm.name === '1' ? true : false"
              @click="create"
              >修改创建</el-button
            >
            <span>&nbsp;&nbsp;&nbsp;修改影响&nbsp;&nbsp;&nbsp;</span
            ><span
              ><i
                class="el-icon-info"
                style="font-size:18px"
                @mouseenter="messg = true"
                @mouseout="messg = false"
              ></i
            ></span>
          </div>
          <span
            v-if="messg"
            style="display: block;line-height: 15px;width: 64%; margin-left: 20px"
            >不停用活动时修改规则：用户连续天数保留，重新匹配新规则。
            在修改时间前签到的匹配来规则，修改时间后签到的，匹配新规则。已签到的用户不不发奖品
            例：老规则是第4天送奖品A，修改成第3天送奖励A。用户张三已签到2天，第3天在修改时间后签到
            可得奖品A：用户已签到3天，第4天签到是不补发奖品</span
          >
        </div>
      </el-form-item>
    </el-form>
    <div
      style="line-height: 35px; margin-left: 107px;color: #595961;font-size: 15px;"
    >
      <div>
        <span>启用时间：</span><span>{{ dataCode.create_time || "" }}</span>
      </div>
      <div>
        <span>更新时间：</span><span>{{ dataCode.update_time || "" }}</span>
      </div>
      <div style="color: #999999;">
        <span
          >已规则启用时间计算连续天数进行奖励匹配，超过以上指定天数后则重新计算连续天数，继续赠送</span
        >
      </div>
      <div style="color: #409EFF;margin-top:10px;"><span>每日签到</span></div>
      <div>
        <span
          >送{{ dataCode.fix_fee || "0" }}积分&送{{
            dataCode.fix_money || "0"
          }}余额</span
        >
      </div>
      <div style="color: #409EFF;margin-top:10px;">
        <span>连续签到递增奖励</span>
      </div>
      <div v-if="dataCode.reward_open == '0'">
        <div>
          <span>积分：</span
          ><span
            >第二天起递增奖励{{ dataCode.reward_fee || "0" }}积分，{{
              dataCode.reward_day_fee || "0"
            }}天后不在递增</span
          >
        </div>
        <div>
          <span>余额：</span
          ><span
            >第二天起递增奖励{{ dataCode.reward_money || "0" }}余额，{{
              dataCode.reward_day_money || "0"
            }}天后不在递增</span
          >
        </div>
      </div>
      <!-- <div v-else>
          <span>该活动尚未开启</span>
        </div> -->
      <div style="color: #409EFF;margin-top:10px;">
        <span>到达指定天数奖励</span>
      </div>
      <div v-if="dataCode.assign == '0'">
        <div v-for="(item, index) in dataCode.data" :key="index">
          <div>
            <span>连续签到{{ item.assign_day }}天，额外赠送：</span>
          </div>
          <div>
            <span
              >{{ item.assign_fee }}积分 {{ item.assign_money }}元余额
              {{ item.title }}</span
            >
          </div>
        </div>
      </div>
      <div v-else>
        <span>该活动尚未开启</span>
      </div>
    </div>
  </div>
</template>
<script>
import { SIGININFO } from "../../service";
export default {
  name: "Modify",
  props: {
    dialogTableVisibled: {
      type: Boolean
    },
    shows: {
      type: Boolean
    }
  },
  data() {
    return {
      picture: false,
      messg: false,
      messge: false,
      dataCode: [],
      create_time: "",
      update_time: "",
      ruleForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      trued: true,
      falsed: false,
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" }
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change"
          }
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change"
          }
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change"
          }
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" }
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }]
      }
    };
  },
  created() {
    this.infoApI();
  },
  methods: {
    create() {
      this.$emit("Clickmodify", { tag: true, datamsg: this.dataCode });
    },
    infoApI() {
      SIGININFO({}).then(res => {
        if (res.code === 200) {
          res.data.map(ele => {
            ele.create_time =
              ele.create_time !== null
                ? this.times(parseInt(ele.create_time))
                : "";
            ele.update_time =
              ele.update_time !== null
                ? this.times(parseInt(ele.update_time))
                : "";
          });
          this.dataCode = res.data[0];
          this.ruleForm.name =
            res.data[0].sign_open === "1" ? this.trued : this.falsed;
        }
      });
    },
    times(timestamp) {
      var time = new Date(timestamp * 1000);
      var year = time.getFullYear();
      var month = time.getMonth() + 1;
      var date = time.getDate();
      var hours = time.getHours();
      var minutes = time.getMinutes();
      var seconds = time.getSeconds();
      return (
        year +
        "-" +
        month +
        "-" +
        date +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds
      );
    }
  }
};
</script>
<style lang="scss" scoped></style>
